<template>
	<div class="reg-main">
		<h2><span>注册</span></h2>
		<ul>
			<li>
				<i class="icon clo-c"></i>
				<van-field v-model="nickname" maxlength="10" placeholder="请输入昵称（选填）" />
			</li>
			<li>
				<i class="icon clo-a"></i>
				<van-field v-model="mobile" type="digit" maxlength="11" placeholder="请输入手机号码" />
			</li>
			<li>
				<i class="icon clo-b"></i>
				<van-field v-model="password" maxlength="16" type="password" placeholder="请输入密码" />
			</li>
			<li>
				<i class="icon clo-d"></i>
				<van-field v-model="recommendId" maxlength="12" type="digit" placeholder="请输入邀请人ID（选填）" />
			</li>
		</ul>
		<a @click="registerInfo"><van-btn text="注册" type="1" /></a>
		<p>
			已有账号？
			<b @click="login">登录</b>
		</p>
	</div>
</template>

<script>
import vanBtn from '../common/vanBtn';
import { requeRegister } from '@/api/';
export default {
	components: {
		vanBtn
	},
	data() {
		return {
			nickname: '',
			mobile: '',
			password: '',
			recommendId: ''
		};
	},
	created() {
		if(this.$route.query.id) this.recommendId = this.$route.query.id
	},
	methods: {
		async registerInfo() {
			if (!this.mobile) {
				this.$notify({ type: 'warning', message: '请输入手机号码'})
				return;
			} else if (this.mobile.length !== 11 || !/^1[0-9]{10}$/.test(this.mobile)) {
				this.$notify({ type: 'warning', message: '手机号码不正确'})
				return;
			} else if (!this.password) {
				this.$notify({ type: 'warning', message: '请输入密码'})
				return;
			}
			const res = await this.getInfo();
			if (res.code === 200) {
				this.$toast({
				  message: '注册成功',
				  position: 'bottom',
				});
				localStorage.setItem('Token', res.data.token);
				localStorage.setItem(
					'userInfo',
					JSON.stringify(res.data.userInfo)
				);
				localStorage.removeItem('viewType');
				this.$nextTick(() => {
					this.$router.push({
						path: '/',
						query: {
							info: 'index'
						}
					});
					location.reload()
				});
			} else {
				this.$notify({ type: 'warning', message: res.msg ||'登录失败' })
			}
		},
		getInfo() {
			return new Promise((resolve, reject) => {
				requeRegister({
					mobile: this.mobile,
					password: this.password,
					nickname: this.nickname,
					recommendId: this.recommendId
				})
					.then(res => {
						resolve(res);
					})
					.catch(msg => {
						resolve(false);
					});
			});
		},
		login() {
			this.$router.push({
				path: '/Login',
				query: {}
			});
		}
	}
};
</script>
<style lang="less" scoped>
.reg-main {
	width: 100%;
	height: 100%;
	background: url(../../assets/images/login_bg.png) no-repeat;
	background-size: 100% 100vh;
	padding: 25% 10% 0 10%;
	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	> a {
		display: block;
		margin-bottom: 5%;
	}
	> p {
		text-align: center;
		color: #888;
		font-size: 24px;
		> b {
			font-weight: 500;
			padding-left: 10px;
			font-size: 28px;
			color: #fa8337;
		}
	}
	> h2 {
		font-size: 50px;
		letter-spacing: 10px;
		font-weight: 500;
		text-align: center;
		margin-bottom: 15%;
		>span{
			    background: -webkit-linear-gradient(left, #666, #000);
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
		}
	}
	> ul {
		margin-bottom: 12%;
		> li {
			margin: 5% 0;
			padding: 1% 2%;
			background: #f5f5f5;
			border-radius: 80px;
			position: relative;
			.icon {
				position: absolute;
				top: 50%;
				left: 6%;
				width: 40px;
				height: 40px;
				margin-top: -20px;
				&.clo-a {
					background: url(../../assets/images/login_a.png) no-repeat;
					background-size: 100% !important;
				}
				&.clo-b {
					background: url(../../assets/images/login_d.png) no-repeat;
					background-size: 100% !important;
				}
				&.clo-c {
					background: url(../../assets/images/login_c.png) no-repeat;
					background-size: 100% !important;
				}
				&.clo-d {
					background: url(../../assets/images/login_b.png) no-repeat;
					background-size: 100% !important;
				}
			}
		}
	}
}
</style>
<style>
.reg-main .van-cell {
	background: transparent;
	padding: 3% 4% 3% 15%;
}
.res-main .van-cell .van-field__control{
	font-size: 0.36rem;
	font-weight: 500;
}
</style>
